<template>
    <div class="flex items-center">
        <!-- 暗黑切换 -->
        <div class="grid mr-[20px] cursor-pointer" @click="toggleTheme">
            <icon v-if="isDark" name="svg-icon-Dark" :size="24" />
            <icon v-else name="svg-icon-Light" :size="24" />
        </div>

        <!-- 消息通知 -->
        <NuxtLink class="grid mr-[20px] cursor-pointer" to="/user/notice">
            <el-badge
                :value="appStore.$state.monitor?.unread"
                :max="99"
                :hidden="!appStore.$state.monitor?.unread"
                class="!flex"
            >
                <icon name="svg-icon-Notice" :size="20" color="#fb9905" />
            </el-badge>
        </NuxtLink>

        <!-- 账户积分 -->
        <NuxtLink to="/user/balance">
            <div class="flex items-center py-1.5 px-2 mr-2.5 rounded-md bg-light">
                <img
                    class="w-2 h-3 mr-1"
                    src="@/assets/image/icon_points.png"
                    alt="icon"
                />
                <span class="text-tx-regular">{{ userPoints }}</span>
            </div>
        </NuxtLink>

        <!-- 订阅会员 -->
        <el-dropdown class="subscribe" @visible-change="handleSubscribe">
            <NuxtLink to="/user/subscribe">
                <div class="version">{{ userSubscribe.name }}</div>
            </NuxtLink>
            <template #dropdown>
                <div class="mx-2 mt-2 font-bold text-tx-regular">
                    到期时间: {{ userSubscribe.end_time }}
                </div>
                <div class="proportion">
                    <div class="prop-item">
                        <div class="flex justify-between">
                            <el-tooltip effect="dark" placement="left-start">
                                <span class="mb-1">MCP数量</span>
                                <template #content>
                                    <p>包含套餐：{{ userQuotaInfo?.mcp?.pack_num }}个</p>
                                    <p>包含固定：{{ userQuotaInfo?.mcp?.user_num }}个</p>
                                </template>
                            </el-tooltip>
                            <span class="text-xs">
                                {{ userQuotaInfo?.mcp?.usage_num }}/{{ userQuotaInfo?.mcp?.total_num }}个
                            </span>
                        </div>
                        <el-progress
                            :percentage="computeProgress(userQuotaInfo?.mcp)"
                            :show-text="false"
                            :striped="true"
                            :stroke-width="7"
                        />
                    </div>
                    <div class="prop-item">
                        <div class="flex justify-between">
                            <el-tooltip effect="dark" placement="left-start">
                                <span class="mb-1">智能体数量</span>
                                <template #content>
                                    <p>包含套餐：{{ userQuotaInfo?.robot?.pack_num }}个</p>
                                    <p>包含固定：{{ userQuotaInfo?.robot?.user_num }}个</p>
                                </template>
                            </el-tooltip>
                            <span class="text-xs">
                                {{ userQuotaInfo?.robot?.usage_num }}/{{ userQuotaInfo?.robot?.total_num }}个
                            </span>
                        </div>
                        <el-progress
                            :percentage="computeProgress(userQuotaInfo?.robot)"
                            :show-text="false"
                            :striped="true"
                            :stroke-width="7"
                        />
                    </div>
                    <div class="prop-item">
                        <div class="flex justify-between">
                            <el-tooltip effect="dark" placement="left-start">
                                <span class="mb-1">知识库数量</span>
                                <template #content>
                                    <p>包含套餐：{{ userQuotaInfo?.know?.pack_num }}个</p>
                                    <p>包含固定：{{ userQuotaInfo?.know?.user_num }}个</p>
                                </template>
                            </el-tooltip>
                            <span class="text-xs">
                                {{ userQuotaInfo?.know?.usage_num }}/{{ userQuotaInfo?.know?.total_num }}个
                            </span>
                        </div>
                        <el-progress
                            :percentage="computeProgress(userQuotaInfo?.know)"
                            :show-text="false"
                            :striped="true"
                            :stroke-width="7"
                        />
                    </div>
                    <div class="prop-item">
                        <div class="flex justify-between">
                            <el-tooltip effect="dark" placement="left-start">
                                <span class="mb-1">训练组数量</span>
                                <template #content>
                                    <p>包含套餐：{{ userQuotaInfo?.train?.pack_num }}条</p>
                                    <p>包含固定：{{ userQuotaInfo?.train?.user_num }}条</p>
                                </template>
                            </el-tooltip>
                            <span class="text-xs">
                                {{ userQuotaInfo?.train?.usage_num }}/{{ userQuotaInfo?.train?.total_num }}条
                            </span>
                        </div>
                        <el-progress
                            :percentage="computeProgress(userQuotaInfo?.train)"
                            :show-text="false"
                            :striped="true"
                            :stroke-width="7"
                        />
                    </div>
                </div>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'
import useConfStore from '~/stores/conf'
import userApi from '~/api/user/index'


const appStore = useAppStore()
const userStore = useUserStore()
const confStore = useConfStore()
const userPoints = computed(() => userStore.user.points)
const userSubscribe = computed(() => userStore.user.subscribe)
const userQuotaInfo = ref({} as UserQuotaResponse)

// 暗黑模式
const isDark = ref(confStore.isDarkColor)

/**
 * 切换风格
 */
const toggleTheme = () => {
    isDark.value = !isDark.value
    confStore.setTheme(isDark.value)
}

/**
 * 计算进度条
 *
 * @param {UserQuotaVo} data
 * @author zero
 */
const computeProgress = (data: UserQuotaVo) => {
    if (data) {
        const percentage = data.usage_num / data.total_num * 100
        return Math.ceil(percentage)
    }
    return 0
}

/**
 * 获取会员配额
 *
 * @param {boolean} status
 * @author zero
 */

const handleSubscribe = async (status: boolean) => {
    if (status) {
        userQuotaInfo.value = await userApi.quota()
        if (userQuotaInfo.value) {
            userStore.user.points = userQuotaInfo.value.points
        }
    }
}
</script>

<style scoped lang="scss">
.subscribe {
    .version {
        padding: 8px 12px;
        margin: 0 10px;
        font-size: 14px;
        font-weight: 700;
        color: var(--color-white);
        cursor: pointer;
        background: linear-gradient(90deg, #274fe8, #52a2e7);
        border-radius: 6px;
    }
}

.proportion {
    width: 240px;
    padding: 2px 12px;
    margin: 6px;
    background-color: var(--el-bg-color-light);
    border-radius: 6px;
    .prop-item {
        padding: 10px 0;
        font-size: 13px;
        color: var(--el-text-color-regular);
    }
    :deep(.el-progress-bar__outer) {
        background-color: var(--el-border-color-light);
    }
}
</style>
